<script setup lang="ts">
import { defineProps, useSlots } from 'vue';
const props = defineProps<{ header?: string }>();
const slots = useSlots();
</script>

<template>
  <div class="page">
    <div :class="['page-header', { 'header-empty': !props.header && !slots.header }]">
      {{ props.header }}
      <slot name="header"></slot>
    </div>
    <div class="page-body">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less">
.page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-header {
  height: 54px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 16px;
  border-bottom: 1px solid #e5e6eb;
  font-weight: bold;
  font-size: 16px;
  line-height: 32px;
  &.header-empty {
    display: none;
  }
}

.page-body {
  padding: 16px;
  overflow-y: auto;
  flex-grow: 1;
  height: 0;
}
</style>
